<script setup>
import { clearToken } from '../util/auth';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'; // 导入 ref
import hospitalapi from '../api'

const router = useRouter();

const logout = function() {
  clearToken(); // 使用 auth 对象调用 clearToken 函数
  ElMessage.success('您已成功退出！');
  router.push('/login'); // 重定向到登录页面
};



</script>



<template>
 <div class="common-layout" style="height:100%;">
    <el-container>
      <el-header class="header-with-title">
        <div class="title-background">
          <span class="title">医护通病房管理</span>
        </div>

        <el-button type="danger" @click="logout" style="margin-left: auto;">退出登录</el-button>
        </el-header>

      <el-container>
        <el-aside width="200px">
            <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router="true"
      >
      <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>病房管理</span>
          </template>
          <el-menu-item-group >
            <el-menu-item index="1-1" route="caseslist">医疗记录</el-menu-item>
            <el-menu-item index="1-2" route="patientlist" >病人列表</el-menu-item>
            <el-menu-item index="1-4" route="bedlist" >床位表</el-menu-item>
            <el-menu-item index="1-5" route="wardlist">病房表</el-menu-item>
             <el-menu-item index="1-3" route="doctorlist">医生列表</el-menu-item>
             <el-menu-item index="1-6" route="departmentlist">科室表</el-menu-item>
             <el-menu-item index="1-7" route="echartslist">报表</el-menu-item>
          </el-menu-item-group>
         
           
            
         
        
        </el-sub-menu>
        <el-menu-item index="2" route="userlist">
          <el-icon><icon-menu /></el-icon>
          <span>用户表</span>
        </el-menu-item>
        
        <el-menu-item index="3" route="personlist">
          <el-icon><icon-menu /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
     
      </el-menu>

        </el-aside>
        <el-main>
            <router-view>

            </router-view>
        </el-main>
      </el-container>
    </el-container>


    
  </div>
</template>

<style>
body, html {
  height: 100%;
  margin: 0;
  background-image: url('/123.jpg');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.el-header.header-with-title {
  background-color: #007BFF; /* 蓝色背景 */
  color: white; /* 文本颜色 */
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
  padding: 0 20px; /* 内边距 */
  height: 90px; /* 调整后的高度 */
}

.title-background {
  flex-grow: 1; /* 让标题容器占据剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.title {
  margin: 0; /* 重置默认的外边距 */
  font-size: 24px; /* 根据需要调整字体大小 */
  font-weight: bold;
  text-align: center; /* 确保文本水平居中 */
}


</style>
